<template>
  <div class="all" v-loading="loading">
    <div class="C-nav">
      <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                size="small"
                >
              </el-date-picker>

              <span><el-input type="text" value="" placeholder="请输入管理员" v-model="condition.admin" size="small"></el-input></span>
               <span><el-input type="text" value="" placeholder="请输入查询用户名" v-model="condition.userId" size="small" style="width: 150px;"></el-input></span>
      <span><el-button type="primary" icon="el-icon-search" @click="search" size="mini">搜索</el-button></span>
    </div>
<div class="C-body">
  <el-table :data="list">
    <el-table-column align="center" type="index" width="50"></el-table-column>
    <el-table-column align="center" prop="userId" label="用户ID"></el-table-column>
    <el-table-column align="center" prop="addCoin" label="加值数"></el-table-column>
    <el-table-column align="center" prop="addTime" label="加值时间"></el-table-column>
    <el-table-column align="center" prop="adminName" label="操作员"></el-table-column>
    <el-table-column align="center" prop="ip" label="操作IP"></el-table-column>
  </el-table>
  <div class="Page">
    <el-pagination
    background
    hide-on-single-page
      @current-change="handleCurrentChange"
      :current-page="condition.pageNum"
      :page-size="condition.pageSize"
      layout="total,prev, pager, next, jumper"
      :total="condition.quantity">
    </el-pagination>
  </div>

  </div>
</div>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import {addDetail} from '@/utils/API'
  export default {
      data() {
        return {
          list:[],
          condition:{
            pageNum:1,
            pageSize:20,
            quantity:0,
            admin:null,
            startTime:null,
            endTime:null,
            userId:null,
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token')
          },
          time:'',
          loading:true
          }
          },
           methods:{
             search(){
               if(this.time){
                 this.condition.startTime=this.time[0]
                 this.condition.endTime=this.time[1]
               }
               this.condition.pageNum=1
              this.postList()
             },
             handleCurrentChange(val){
               this.condition.pageNum=val
               this.postList()
             },
             postList(){
               this.loading=true
               addDetail(this.condition).then(res=>{
                 this.list=res.data.list
                 this.condition.quantity=res.data.total
                 this.$nextTick(function(){
                  this.loading=false
                 })
               })
             }
            },
            mounted() {
              this.postList()
            }

          }
</script>

<style scoped>
  .all{
    padding: 5px 5px;
  }
  .C-nav{
    display: inline-flex;
    border-bottom: 1px solid #eee;
    height: 45px;
    width: 100%;
  }
  span{
    display: flex;
    font-size: 14px;
    margin-left: 5px;
    line-height: 30px;
        height: 30px;
  }
 /* input{
    border: 1px solid #DCDFE6;
    border-radius: 5px;
  } */
  .Page{
    margin: auto;
    width: 50%;
  }
  tr{
    text-align: center;
  }
  th{
        height: 30px;
        background: #eef3f7;
        border-bottom: 1px solid #d5dfe8;
        font-weight: normal;
  }
  td{
    border-bottom: 1px solid #eee;
    height: 30px;
  }
</style>
